<template>
 
    <el-select style="background-color:transparent;color:white; " v-model="value" placeholder="请选择各分店书籍"  
    @change="changecity()">
    <div class="el-input__wrapper"></div>
      <el-option
      style=""
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        <span style="float: left">{{ item.label }}</span>
        <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
      </el-option>
    </el-select>
  </template>
  
  <script>
    export default {
      data() {
        return {
          cities: [{
            value: '北京',
            label: '北京'
          }, {
            value: '上海',
            label: '上海'
          }, {
            value: '南京',
            label: '南京'
          }, {
            value: '成都',
            label: '成都'
          }, {
            value: '深圳',
            label: '深圳'
          }, {
            value: '广州',
            label: '广州'
          }],
          value: ''
        }
    },
    methods: {
        changecity() {
            var data = new FormData()
            data.append('city', this.value)
            this.$axios.post('/getcitybooks', data).then(resp => {
                this.$emit('citybooks',resp.data)
            })
        }
      }
    }
  </script>
  <style>

.el-select .el-input__wrapper{
     background-color:transparent;
     color: white;
}
.el-select .el-input__inner {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.801);
    border: rgb(255, 255, 255);
}
</style>